import React, { useState } from "react";
import '../css/login.css'

import {useNavigate} from 'react-router-dom' //路由
import { UserOutlined  } from '@ant-design/icons'; //图标
import { Button, Input} from 'antd'; //ui


const Login =()=> {

  const navigate = useNavigate() //路由

  const [user,setuser] = useState({  // useState可以传入初始值,返回状态与修改状态的函数
    name: 'admin',
    pass:'123456'
  })
  // console.log(user.name);


  // 账号
  let zhanghao =(e)=>{
    // this.setState({ //类组件的写法
    //   name:e.target.value
    // })

    setuser({  //函数组件的写法
      ...user,name:e.target.value
    })
  }

  // 密码
  let mima =(e)=>{
    // this.setState({
    //   pass:e.target.value
    // })

    setuser({   //函数组件的写法
      ...user,pass:e.target.value
    })
  }

  // 点击登录存数据
  let login = ()=>{
    navigate('/index/Visitorindex')
    sessionStorage.setItem('login',user.name)
  }
  
    return (
      <>
        <img className="img" src="http://visit.lening365.com/static/img/20220418203517.73d99f43.jpg" alt="访客系统" />
        <div className="login-box"> 
          <div className="input-box">
            <h2>登录</h2>
            <Input size="large" placeholder="请输入账号" prefix={<UserOutlined />} value={user.name} 
              onChange={zhanghao} />
            <Input.Password placeholder="请输入密码" className="pass" value={user.pass} onChange={mima} />

            <Button type="primary" onClick={login}>登录</Button>
          
          </div>
        </div>
      </>
    );
}

export default Login
